<template>
  <div class="main-card">
    <el-card class="box-card">
      <template #header>
        <span>字典数据</span>
      </template>
      <el-form ref="ruleForm" :model="queryParams" label-width="100px">
        <div class="search-form">
          <el-form-item label="字典名称" prop="dictType">
            <el-select v-model="queryParams.dictType" size="small">
              <el-option
                v-for="(item, key) in typeOptions"
                :key="key"
                :label="item.dictName"
                :value="item.dictType"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="字典标签">
            <el-input v-model="queryParams.dictLabel" clearable />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryParams.enable" clearable placeholder="请选择">
              <el-option
                label="正常"
                :value="1"
              />
              <el-option
                label="停用"
                :value="0"
              />
            </el-select>
          </el-form-item>
          <el-button style="margin-left: 20px" type="primary" @click="search">搜索</el-button>
        </div>
      </el-form>
      <div style="margin:20px 0;">
        <el-button v-hasPermi="['system:dict:add']" type="primary" @click="addOrUpdate()">添加字典</el-button>
        <el-button v-hasPermi="['system:dict:remove']" type="danger" @click="deleteDictData">删除字典</el-button>
      </div>
      <div>
        <el-table
          :data="dataList"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="dictCode"
          label="字典编码"
          width="120"
        />
        <el-table-column
          prop="dictLabel"
          label="字典标签"
          width="120"
        />
        <el-table-column
          prop="dictValue"
          label="字典健值"
          width="120"
        />
        <el-table-column
          prop="enable"
          label="状态"
          width="120"
        >
          <template #default="{row}">
            {{ row.enable ? '正常' : '停用'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="120"
          :formatter="dateFormat"
        />
        <el-table-column
          prop="remark"
          label="备注"
          width="120"
        />
        <el-table-column label="操作" width="250">
          <template v-slot="{ row }">
            <el-button v-hasPermi="['system:dict:edit']" type="primary" @click="addOrUpdate(row)">修改</el-button>
            <el-button v-hasPermi="['system:dict:remove']" type="danger" @click="deleteDictData(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        v-show="total>0"
        :current-page="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
      />
      </div>
    </el-card>
    <au-dict-data :value="isAuDictDataShow" :query-params="queryParams" @close="isAuDictDataShow = false" @onRefresh="search"/>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import AuDictData from './components/AuDictData.vue'
import tableList, { BaseQueryType, BaseDataType } from '@/mixins/tableList'
import { DictData } from '@/store/modules/system/dictData'
import { DictType } from '@/store/modules/system/dictType'

interface QueryParamsType extends BaseQueryType{
  dictType: string;
  dictLabel: string;
  enable: number;
}

interface DataType extends BaseDataType<DictData> {
  isAuDictDataShow: boolean;
  queryParams: QueryParamsType;
  typeOptions: Array<DictType>;
}

export default {
  name: 'DictData',
  components: { AuDictData },
  setup() {
    const route = useRoute()
    const store = useStore()
    const data = reactive<DataType>({
      url: 'dictData/getList',
      dataList: [],
      queryParams: {
        dictType: '',
        dictLabel: '',
        enable: 1,
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      selectList: [],
      typeOptions: [],
      isAuDictDataShow: false
    })
    const {
      dateFormat,
      getList,
      handleSelectionChange,
      handleCurrentChange,
      search
    } = tableList(data)
    const getDictType = () => {
      const dictId = route.params.dictId
      store.dispatch('dictType/getDictType', dictId).then(res => {
        data.queryParams = res.data
        // data.queryParams.dictType = data.queryParams.dictType
        search.value()
      })
    }
    getDictType()
    const addOrUpdate = (row: DictData) => {
      if (!row) {
        row = {
          dictType: data.queryParams.dictType,
          dictLabel: '',
          dictValue: ''
        }
      }
      store.commit('dictData/SET_DATA', row)
      data.isAuDictDataShow = true
    }
    const deleteDictData = (row: DictData) => {
      const dictIds = row.dictCode || (data.selectList || []).map(item => item.dictCode)
      ElMessageBox.confirm('您确定要删除"' + dictIds + '"字典数据吗, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return store.dispatch('dictData/deleteDictData', dictIds)
      }).then(() => {
        ElMessage({
          message: '删除成功',
          type: 'success'
        })
        getList.value()
      }).catch()
    }
    const getTypeList = () => {
      store.dispatch('dictType/getDictTypeList').then(res => {
        data.typeOptions = res.data
      })
    }
    getTypeList()
    return {
      dateFormat,
      getList,
      handleSelectionChange,
      handleCurrentChange,
      search,
      ...toRefs(data),
      addOrUpdate,
      deleteDictData
    }
  }
}
</script>

<style lang="scss">
.el-pagination{
  margin-top: 20px;
}
</style>
